<!-- 其他人的博客列表页面 -->
<template>
  <!-- 顶部 -->
  <van-sticky>
    <div class="top_div">
      <div class="return_div" @click="this.$router.back()">
        <van-icon name="arrow-left" />
      </div>
      <div class="top_title">{{ userName }}的博客</div>
      <van-icon name="ellipsis" class="share_more" @click="shareShow = true" />
    </div>
  </van-sticky>

  <!-- 分享面板 -->
  <van-share-sheet
    v-model:show="shareShow"
    title="立即分享给好友"
    :options="shareOptions"
    @select="goShare"
  />

  <van-empty
    v-if="blogList.length === 0"
    image="https://myblog-mycaveolae.oss-cn-chengdu.aliyuncs.com/diary/empty01.jpg"
    image-size="20rem"
    description="没有博客"
  />

  <!-- 该用户发布的所有博客 -->
  <div class="all_shunjian">
    <div class="per_shunjian" v-for="(item, index) in blogList" :key="index">
      <div class="time_style">{{ item.createTime }}</div>
      <div class="image_list">
        <div
          class="per_image"
          v-for="(itemImage, indexImage) in item.imageList"
          :key="indexImage"
        >
          <van-image
            width="5.5rem"
            height="5.5rem"
            radius="5px"
            fit="fill"
            :src="itemImage"
            @click="clickPicEnlarge(item.imageList, indexImage)"
          />
        </div>
      </div>
      <div class="content_style">
        <!-- 这个世界人潮拥挤，请给自己的生活多点信心，照顾好自己，你要逼自己优秀，优于过去的自己。
          愿你成为自己喜欢的样子，不抱怨，不将就，有野心，有光芒。
          其实让人焦虑的，不是忙也不是累，而是没有什么特别感兴趣的东西，也没有什么特别想爱的人，明知道自己该努力了，却又不知道该往哪里用力。 -->
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant'
import { getBlogListByUserAid } from '../../api/blog.js'
export default {
  data() {
    return {
      userAid: this.$route.query.userAid, // 用户aid
      userName: '', // 用户名
      shareShow: false, // 控制分享面板的显示
      shareOptions: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ], // 分享面板里面的内容
      blogList: [], // 该用户的博客列表
    }
  },

  created() {
    // 获取该用户的所有博客
    this.getBlogListByUserAidFunc()
  },

  methods: {
    // 点击分享
    goShare(options, index) {
      this.$toast({
        message: options.name,
        icon: options.icon,
        duration: 1000,
      })
      this.shareShow = false
    },

    // 点击图片放大
    clickPicEnlarge(imageList, index) {
      ImagePreview({
        images: imageList,
        startPosition: index,
      })
    },

    // 获取该用户的所有博客
    getBlogListByUserAidFunc() {
      getBlogListByUserAid(this.userAid).then((res) => {
        // console.log(res);
        this.userName = res.data.data.user.userName
        this.blogList = res.data.data.blogList
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.top_div {
  width: 100%;
  height: 2em;
  background-color: rgb(86, 82, 82);
  color: aliceblue;
  padding-top: 2em;
  display: flex;
}
.return_div {
  width: 30px;
  padding-left: 20px;
}
.top_title {
  width: 40%;
  text-align: center;
  margin-left: 4em;
  margin-right: auto;
  color: rgb(249, 239, 221);
  //   font-weight: 600;
  font-size: 15px;
}
.share_more {
  font-size: 30px;
  margin-right: 10px;
  margin-top: -3px;
}
.all_shunjian {
  width: 90%;
  margin: auto;
  margin-top: 20px;
}
.per_shunjian {
  margin-bottom: 20px;
}
.time_style {
  color: #909399;
  margin-bottom: 10px;
}
.image_list {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.per_image {
  margin-bottom: 10px;
  margin-right: 10px;
}
.content_style {
  color: #303133;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  white-space: pre-wrap;
}
</style>
